<template>
  <l-layout class="l-tab-page">
    <l-panel>
      <FullCalendar :options="calendarOptions" />
    </l-panel>
  </l-layout>
</template>

<script>
import FullCalendar from "@fullcalendar/vue";
import dayGridPlugin from "@fullcalendar/daygrid";
import timeGridPlugin from "@fullcalendar/timegrid";
import interactionPlugin from "@fullcalendar/interaction";
import bootstrapPlugin from "@fullcalendar/bootstrap";

export default {
  components: {
    FullCalendar,
  },
  data() {
    return {
      calendarOptions: {
        locale: "zh-cn",
        plugins: [dayGridPlugin, timeGridPlugin, interactionPlugin, bootstrapPlugin],
        buttonText: { today: "今日", month: "月", week: "周", day: "日" },
        titleFormat: { year: "numeric", month: "2-digit" },
        initialView: "dayGridMonth",
        headerToolbar: {
          left: "prev,next today",
          center: "title",
          right: "dayGridMonth,timeGridWeek,timeGridDay",
        },
        dateClick: this.handleDateClick,
      },
    };
  },
  methods: {
    handleDateClick() {
      //console.log(arg)
    },
  },
};
</script>
<style lang="scss">
.fc .fc-button {
  padding: 2px 4px;
  outline: 0 !important;
}
.fc .fc-button-primary:focus {
  box-shadow: none !important;
}
.fc .fc-button:focus {
  box-shadow: none !important;
}
.fc .fc-button-primary {
  background-color: #409eff;
  border-color: #409eff;
}
.fc .fc-button-primary:hover {
  background: #66b1ff;
  border-color: #66b1ff;
  color: #fff;
}
.fc .fc-button-primary:not(:disabled):active,
.fc .fc-button-primary:not(:disabled).fc-button-active {
  background: #66b1ff;
  border-color: #66b1ff;
  color: #fff;
}
.fc .fc-button-primary:disabled {
  color: #fff;
  background-color: #a0cfff;
  border-color: #a0cfff;
}
.fc .fc-toolbar.fc-header-toolbar {
  margin-bottom: 16px;
  padding: 16px 16px 0 16px;
}
</style>
